﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
%>
<jsp:include page="/comm/header.jsp"></jsp:include>
 <div class="clear"></div>
<!--第1部分开始  --> 
    <div class="wrap1">
    	<div class="blank1"></div>
        
<!--选项卡开始--> 	
<div id="mainTabbox">
	<jsp:include page="../tabboxhead.jsp"/>
 	
 	<div id="conten">
 		<div class="tab_show" id="con_tabmy_1">
  
<jsp:include page="left.jsp"></jsp:include>
<div class="wrap_left">
	<div class="wrap_m2">
    
	   <div class="wrap_m2_cont">
       
       <!--帐号管理选项卡开始 -->
<div class="box_profile">
	<div id="tabbox6">
		<ul>	
			<s:if test="photoTag==1">
			<li id="tabp1" onclick="setTab('tabp',1,3)"><a>基本资料</a></li>
			<li id="tabp2" onclick="setTab('tabp',2,3)" class="hover"><a>头像照片</a></li>
			</s:if>
			<s:else>
			<li id="tabp1" onclick="setTab('tabp',1,3)" class="hover"><a>基本资料</a></li>
			<li id="tabp2" onclick="setTab('tabp',2,3)"><a>头像照片</a></li>
			</s:else>
 		</ul>
 
	</div>
	<div id="conten6">
 		<div class="tabp_show" id="con_tabp_1">
      <!--选项卡1内容开始-->
<form name="saveBaseInfo" action="<%=path%>/saveBaseInfo.htm" method="post">
<div class="input_box">
	<div id="tipMessage1"><s:property value="tipMessage"/></div>
	<ul>
		<li class="t1"><span class="span33">用户账户：</span></li>
        <li class="t2"><s:property value="userModel.email"/></li>
    	<li class="t1"><span class="span33">用户昵称：</span></li>
        <li class="t2">
        <s:if test="userModel.nickName!=null">
        	<s:textfield name="userModel.nickName" id="nickName" disabled="true" cssClass="input1"/><span id="nickName_msg"></span>
        </s:if>
        <s:else>
        	<s:textfield name="userModel.nickName" id="nickName" cssClass="input1"/><span id="nickName_msg"></span>
        </s:else>
        </li>
        <li class="t1"><span class="span33">性　　别：</span></li>
        <li class="t2">
        <s:if test="userModel.nickName!=null">
        	<s:radio id="sex"  name="userModel.sex" list="#{1:'男' , 0:'女'}" disabled="true" value="userModel.sex" theme="simple" />
        </s:if>
        <s:else>
        	<s:radio id="sex"  name="userModel.sex" list="#{1:'男' , 0:'女'}" value="userModel.sex" theme="simple" />
        </s:else>	
        </li>

        <li class="t1"><span class="span33">手机号码：</span></li>
        <li class="t2">
        <s:if test="userModel.nickName!=null">
        	<s:textfield name="userModel.mobile" id="mobile" disabled="true" cssClass="input1"/>
        </s:if>
        <s:else>
        	<s:textfield name="userModel.mobile" id="mobile" cssClass="input1"/>
        </s:else>
        <span id="mobile_msg"></span></li>
        
        <li class="t1"><span class="span33">腾讯QQ：</span></li>
        <li class="t2">
        <s:if test="userModel.nickName!=null">
			<s:textfield name="userModel.qqid" id="qqid" disabled="true" cssClass="input1"/>
		</s:if>
		<s:else>
			<s:textfield name="userModel.qqid" id="qqid" cssClass="input1"/>
		</s:else>	
		<span id="qqid_msg"></span>
        </li>
        <li class="t1"><span class="span33">MSN：</span></li>
        <li class="t2">
        <s:if test="userModel.nickName!=null">
			<s:textfield name="userModel.msnid" id="msnid" disabled="true" cssClass="input1"/>
		</s:if>
		<s:else>
			<s:textfield name="userModel.msnid" id="msnid" cssClass="input1"/>
		</s:else>			
		<span id="msnid_msg"></span>
        </li>
		<li class="t1"><span class="span33">真实姓名：</span></li>
		<li class="t2">
		 <s:if test="userModel.nickName!=null">
			<s:textfield name="userModel.realName" disabled="true" id="realname" cssClass="input1"/>
		</s:if>
		<s:else>
	 		<s:textfield name="userModel.realName" id="realname" cssClass="input1"/>
		</s:else>
	
	<span class="span_broker">(*经纪人填写）</span>
	<div id="name_msg"></div></li>
	
	<li class="t1"><span class="span33">代购区域：</span></li>
	<li class="t2" style="margin-bottom:20px;">
		 <s:if test="userModel.nickName!=null">
			<s:checkboxlist id="area" name="userModel.arrArea" theme="simple" disabled="true" list="serviceAreaList" listKey="areaId" listValue="areaName" cssClass="input1"/>
		</s:if>
		<s:else>
			<s:checkboxlist id="area" name="userModel.arrArea" theme="simple" list="serviceAreaList" listKey="areaId" listValue="areaName" cssClass="input1"/>
		</s:else>
		<span class="span_broker">(*经纪人填写）</span>
		<div id="quyu_msg"></div></li>
	<li class="t1"><span class="span33">代购行业：</span></li>
	<li class="t2" style="margin-bottom:20px;">
	<s:if test="userModel.nickName!=null">
		<s:checkboxlist id="category" name="userModel.arrCat" disabled="true" theme="simple" list="serviceTypeList" listKey="categoryId" listValue="categoryName" cssClass="input1"/>
	</s:if>
	<s:else>
		<s:checkboxlist id="category" name="userModel.arrCat" theme="simple" list="serviceTypeList" listKey="categoryId" listValue="categoryName" cssClass="input1"/>
	</s:else>
	<span class="span_broker">(*经纪人填写）</span>
	<div id="hangye_msg"></div></li>
	<li class="t1"><span class="span33">从事职业：</span></li>
	<li class="t2">
	<s:if test="userModel.nickName!=null">
		<s:textfield name="userModel.profession" disabled="true" id="profession" cssClass="input1"/>
	</s:if>
	<s:else>
		<s:textfield name="userModel.profession" id="profession" cssClass="input1"/>
	</s:else>
	<span class="span_broker">(*经纪人填写）</span>
	<div id="zhiye_msg"></div></li>
	<li class="t1"><span class="span33">代购格言：</span></li>
        <li class="t2" style="margin-bottom:70px;">
        <s:if test="userModel.nickName!=null">
        	<s:textarea id="selfdesc" name="userModel.selfdesc" disabled="true" cols="60" rows="5"/><span id="selfdesc_msg"></span>
        </s:if>
         <s:else>
         	<s:textarea id="selfdesc" name="userModel.selfdesc" cols="60" rows="5"/><span id="selfdesc_msg"></span>
         </s:else><span class="span_broker">(*经纪人填写）</span>
        </li>
        <li>
        <s:if test="userModel.nickName!=null">
         <div id="modifyInfo1Button" class="but_submit" style="text-align:center;float:left;">
        	<a href="#" onclick="modifyInfo1();">修改</a>&nbsp;&nbsp;&nbsp;
        </div>
        <div id="saveInfo1Button" class="but_submit" style="display:none;margin-left:40px;float:left;">
        	<a href="#" onclick="submitInfo1();">保存</a>&nbsp;&nbsp;&nbsp;
        </div>
        </s:if>
        <s:else>	
        <div id="modifyInfo1Button" class="but_submit" style="display:none;">
        	<a href="#" onclick="modifyInfo1();">修改</a>&nbsp;&nbsp;&nbsp;
        </div>
        <div id="saveInfo1Button" class="but_submit" style="text-align:center;margin-left:80px;float:left;">
        	<a href="#" onclick="submitInfo1();">保存</a>&nbsp;&nbsp;&nbsp;
        </div>
        </s:else>
        </li>
    </ul>
</div>
</form>
<div class="clear"></div>
        <!--选项卡1内容结束-->
        </div>
        <div class="tabp_show" id="con_tabp_2">
      <!--选项卡2内容开始-->
<div class="input_box">
	<div class="pbox"> 
	<div class=" wrap_left">
		<div class="pbox1">
         	<div class="pbox_tt">当前使用的头像</div>
            <div class=" wrap_left">
            	<s:if test="userModel.photoUrl==null">
            	<div class="show"><img src="images/head.jpg" width="120" height="120"/><br />120x120</div>
            	</s:if>
            	<s:else>
            	<div class="show"><img src='<s:property value="userModel.photoUrl120"/>' width="120" height="120"/><br />120x120</div>
            	</s:else>
            </div>
            <div class=" wrap_left">
            
            <s:if test="userModel.photoUrl==null">
            	<div class="show"><img src="images/icon_nohead.gif" width="50" height="50"/><br />50x50</div>
            	</s:if>
            	<s:else>
            	<div class="show"><img src='<s:property value="userModel.photoUrl50"/>' width="50" height="50"/><br />50x50</div>
            	</s:else>
            </div>
            <div class="clear"></div>
          
          </div>
	</div>

	<div class=" wrap_left">
    	<div class="pbox2_box">
    	<s:fielderror/>
    	  <s:form action="photoUpload" method="post" enctype="multipart/form-data">
    		<div class="pbox2_tt">上传我的新头像,上传真人头像，诚信从头像开始！</div>
			<div class="pbox2" style="height:200px; ">上传头像<br />
			 <s:file id="photo" name="file" label="文件1" cssClass="input5"></s:file><span id="photoFile_msg"></span>
			<br />
			<s:submit label="上传" value="提交" cssClass="input3" onclick="photoCheck();" />
			</div>
        	<div class="tips1"><span>上传说明：图片格式支持jpg/png。</span></div>
        	</s:form>
        </div>
	</div>
</div>
</div>
<div class="clear"></div>
        <!--选项卡2内容结束-->
        </div>
        <div class="tabp_show" id="con_tabp_3">
     	<!--选项卡3内容开始-->
     	<!--选项卡3内容结束-->   
        </div>
  		<div class="clear"></div>
	 </div>
 </div>
<!--帐号管理选项卡结束 -->  
 </form>       
	 </div>
 </div>
        </div>  
       </div>
    </div>
</div>
<div class="clear"></div>
        <!--内容结束-->
 		</div>
 	</div>
 </div>
<!--选项卡结束-->         
      </div>
    </div>
<jsp:include page="/comm/bottom.jsp"></jsp:include>
</body>
</html>
<script type="text/javascript">

<s:if test="photoTag==1">
	$("#con_tabp_1").attr("style","display:none");
	$("#con_tabp_2").attr("style","display:block");
</s:if>	

	function modifyInfo1(){
		$("#tipMessage1").html("");
		$("#nickName").attr("disabled",false); 
		//$("#sex").attr("disabled",false);
		//$("input[@type=radio]").attr("disabled",false);
		
		$("input[name='userModel.sex']").each(function(){
        	$("input[name='userModel.sex']").attr("disabled",false);
   		});    
		
		$("#selfdesc").attr("disabled",false);
		$("#realname").attr("disabled",false);
		$("#mobile").attr("disabled",false);
		$("#qqid").attr("disabled",false);
		$("#msnid").attr("disabled",false);
		
		$('input[name="userModel.arrArea"]').attr("disabled",false);
		$('input[name="userModel.arrCat"]').attr("disabled",false);
		
		$("#profession").attr("disabled",false);
		$("#modifyInfo1Button").attr("style","display:none");
		$("#saveInfo1Button").attr("style","text-align:center; margin:30px 0");
	}

	function submitInfo1(){
		//清空操作
		$("#nickName_msg").html("");
		$("#selfdesc_msg").html("");
		//清空操作
		$("#mobile_msg").html("");
		$("#qqid_msg").html("");
		$("#msnid_msg").html("");
		
		var mobile = $.trim($("#mobile").val());
		var qqid = $.trim($("#qqid").val());
		var msnid = $.trim($("#msnid").val());
		
		//昵称
		var nickName = $("#nickName").val().replace(/(^\s*)|(\s*$)/g, "");
		if(nickName==''){
   			$("#nickName_msg").html("<font color='red'>昵称不能为空!</font>");
   			return;
		}
		
		if(nickName.length<6||nickName.length>30){
   			$("#nickName_msg").html("<font color='red'>昵称必须为6到30位的字母和数字!</font>");
   			return;
   		}
   		var Regx = /^[A-Za-z0-9]*$/;
		//必须为字母和数字
		if(!Regx.test(nickName)){
			$("#nickName_msg").html("<font color='red'>昵称必须为6到30位的字母和数字!</font>");
   			return;
		}
		
		if(!(mobile=='')){
			var reg =/^0{0,1}(13[0-9]|15[0-9]|18[0-9])[0-9]{8}$/;
		  	if(!reg.test(mobile)){
			  	$("#mobile_msg").html("<font color='red'>手机号码格式不对！</font>");
			  	return;
		  	}
		}
		
		if(!(qqid=='')){
			if(qqid.length<5||qqid.length>12){
	   			$("#qqid_msg").html("<font color='red'>qq号码格式不对!</font>");
	   			return;
	   		}
			
			var Regx = /^[1-9][0-9]*$/;
			//必须为字母和数字
			if(!Regx.test(qqid)){
				$("#qqid_msg").html("<font color='red'>qq号码格式不对!</font>");
	   			return;
			}
		}
		
		if(!(msnid=='')){
			var re = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g);
			if(!re.test(msnid)){
				$("#msnid_msg").html("<font color='red'>MSN格式不对!</font>");
				return;
			}
		}

		//自我介绍
		var selfdesc = $("#selfdesc").val().replace(/(^\s*)|(\s*$)/g, "");
	
		if(selfdesc.length>200){
   			$("#profession_msg").html("<font color='red'>自我介绍不能超过200个字符!</font>");
   			return;
   		}
		document.saveBaseInfo.submit();
	}
	
	function photoCheck(){ 
		var obj=document.getElementById('photo');
		
		var file = obj.value;
		if(file == null || file == ""){
			$("#photoFile_msg").html("图像图片不能为空!");
			return false;
		}
		
	    var extend = file.substring(file.lastIndexOf(".")+1); 
	    
	    if(extend==""){ 
	    	$("#photoFile_msg").html("图片格式不符合要求!");
	    }else{ 
	    	extend = extend.toLowerCase();
			if(!(extend=="png"||extend=="jpg"||extend=="gif")){ 
	   			$("#photoFile_msg").html("请上传后缀名为jpg/png/gif的文件!"); 
	   			var nf = obj.cloneNode(true); 
	            nf.value=''; 
	            obj.parentNode.replaceChild(nf, obj); 
	   			return false; 
			} 
	    } 
	    return true; 
	}
	
</script>
